<template>
  <div id="repairTjfxByEqTypeDiv">
    <Breadcrumb content="统计分析" />

    <div class="bodyContent">
      <Splitpanes horizontal class="horizontalLine">
        <Pane size="60">
          <div class="chatBox">
            <!-- <div class="common-box-title">
              <el-icon color="#5a8fc6" size="11">
                <HelpFilled />
              </el-icon>
              <span>故障次数</span>
            </div> -->
            <div id="tjfxChart" class="chart"></div>
          </div>
        </Pane>
        <Pane size="40">
          <div class="tableBody">
            <vxe-toolbar perfect>
              <template #buttons>
                <div class="tag-group">
                  <span class="tag-group__title">【时间】：</span>
                  <el-tag size="mini" v-for="item in timeButtonList" :key="item.code" effect="plain" :class="searchForm.monthType == item.code ? 'selectedElTagClazz' : 'elTagClazz'" @click="clickMonthType(item)">
                    {{ item.name }}
                  </el-tag>
                  <vxe-input v-model="searchForm.month" placeholder="选择月份" type="month" transfer valueFormat="yyyy-MM-dd" @change="changeSearchFormMonth()" class="monthClazz"></vxe-input>
                </div>
              </template>
            </vxe-toolbar>
            <vxe-table ref="repairTjfxRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="repairTjfxList" :loading="tloading" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="seq" width="30" title=""></vxe-column>
              <vxe-column title="操作" align="center" width="150">
                <template #default="{ row }">
                  <el-link type="primary" :underline="false" @click="showEquiptRepair(row)">
                    <span>设备详情</span>
                  </el-link>
                </template>
              </vxe-column>
              <vxe-column field="equiptTypeName" title="设备类型" width="150"> </vxe-column>
              <vxe-column field="equiptCnt" title="总台数" width="150"> </vxe-column>
              <vxe-column field="repairEqCnt" title="故障台数" width="150"> </vxe-column>
              <vxe-column field="repairCnt" title="总故障次数" width="200">
                <template #default="{ row }">
                  <el-link type="primary" :underline="false" @click="showRepairDetailByEquiptType(row)">
                    <span>{{ row.repairCnt }}</span>
                  </el-link>
                </template>
              </vxe-column>
              <vxe-column field="repairedCnt" title="已维修故障" width="200"> </vxe-column>
              <vxe-column title="完好率" width="200">
                <template #default="{ row }">
                  {{ getWHL(row) }}
                </template>
              </vxe-column>
              <vxe-column field="workHours" title="维修用时" width="200"> </vxe-column>
              <vxe-column field="repairFee" title="总维修费用" width="200"> </vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { isEmpty } from 'lodash';
import * as echarts from 'echarts';

let store = AppStore();
onMounted(() => {
  if (!isEmpty(proxy.$route.query.planId)) {
    searchForm.monthType = proxy.$route.query.planId.toString();
  }
  if (!isEmpty(proxy.$route.query.faultId)) {
    searchForm.month = proxy.$route.query.faultId.toString();
  }
  if (isEmpty(searchForm.monthType) && isEmpty(searchForm.month)) {
    searchForm.monthType = 'thisMonth';
  }
  getRepairOrderTjfxByEqType();
});
let searchForm = reactive({
  searchValue: '',
  month: '',
  monthType: ''
});
let tloading = ref(false); //加载状态
let repairTjfxList: any = reactive([]);
let timeButtonList: any = reactive([
  {
    code: 'thisMonth',
    name: '本月'
  },
  {
    code: 'lastMonth',
    name: '上月'
  }
]); //选择字典

function getRepairOrderTjfxByEqType() {
  tloading.value = true;
  repairTjfxList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqRepairOrder/getRepairTjfxByEqType';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        monthType: searchForm.monthType,
        month: searchForm.month
      }
    })
    .then((res: any) => {
      repairTjfxList.push(...res.data);
      initTjfxChart();
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}
function initTjfxChart() {
  const xAxisList = repairTjfxList.map((item: any) => item.equiptTypeName);
  const seriesList = repairTjfxList.map((item: any) => item.repairCnt);
  const repairCntList = repairTjfxList.map((item: any) => item.workHours);
  // for(const x of xAxisList){

  //   repairCnt
  // }
  if (echarts.getInstanceByDom(document.getElementById('tjfxChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('tjfxChart') as HTMLElement);
  }
  const myChart = echarts.init(document.getElementById('tjfxChart') as HTMLElement);
  // 绘制图表
  // myChart.setOption({
  //   title: {
  //     text: '任务分类统计',
  //     textAlign: 'center',
  //     left: '50%',
  //     textStyle: {
  //       fontSize: 14
  //     }
  //   },
  //   grid: {
  //     left: 50,
  //     right: 50,
  //     top: 50,
  //     bottom: 40
  //   },
  //   tooltip: {},

  //   xAxis: {
  //     type: 'category',
  //     data: xAxisList,
  //     axisPointer: {
  //       type: 'shadow'
  //     }
  //   },
  //   yAxis: {},
  //   series: [
  //     {
  //       name: '故障次数',
  //       type: 'bar',
  //       data: seriesList
  //     }
  //   ]
  // });
  // window.addEventListener('resize', function () {
  //   myChart.resize();
  // });

  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['故障次数', '总维修用时']
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisList,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位（次）'
      },
      {
        type: 'value',
        name: '单位（h）'
      }
    ],
    series: [
      {
        name: '故障次数',
        type: 'bar',
        barMaxWidth: 35,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: seriesList
      },

      {
        name: '总维修用时',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '';
          }
        },
        data: repairCntList
      }
    ]
  });
}
function getWHL(row: any) {
  if (row.repairEqCnt > 0 && row.equiptCnt > 0) {
    return (((row.equiptCnt - row.repairEqCnt) / row.equiptCnt) * 100).toFixed(2) + '%';
  } else {
    return '';
  }
}

function showEquiptRepair(row: any) {
  const data = {
    equiptTypeCode: row.equiptTypeCode,
    month: searchForm.month,
    monthType: searchForm.monthType,
    url: '/repairTjfxByEqType'
  };
  proxy.$router.push({ path: '/repairTjfxByEquipt', query: data });
}

function showRepairDetailByEquiptType(row: any) {
  const data = {
    equiptTypeCode: row.equiptTypeCode,
    month: searchForm.month,
    monthType: searchForm.monthType,
    url: '/repairTjfxByEqType'
  };
  proxy.$router.push({ path: '/repairDetail', query: data });
}

function clickMonthType(row: any) {
  searchForm.month = '';

  if (searchForm.monthType == row.code) {
    searchForm.monthType = '';
  } else {
    searchForm.monthType = row.code;
  }
  getRepairOrderTjfxByEqType();
}
function changeSearchFormMonth() {
  searchForm.monthType = '';
  getRepairOrderTjfxByEqType();
}
</script>

<style lang="scss" scoped>
#repairTjfxByEqTypeDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .elTagClazz {
        margin-left: 5px;
        cursor: pointer;
      }
      .selectedElTagClazz {
        margin-left: 5px;
        cursor: pointer;
        background-color: #89d7fc;
      }
      .monthClazz {
        margin-left: 5px;
        margin-top: 5px;
        width: 100px;
      }
    }
    .horizontalLine {
      :deep(.splitpanes__splitter) {
        background-color: $base-white;
      }
    }

    // 中间table表格
    .tableBody {
      height: calc(100% - 40px - 32px);
    }
    // 质控靶值设定弹框表格
    .tableTargetBody {
      height: 600px;
      .tableTargetBodyRight {
        height: calc(100% - 2px);
        border: 1px solid #e8eaec;

        .closeBtn {
          margin-left: 720px;
        }
      }
    }

    // 右侧保存按钮
    .saveBtn {
      float: right;
      margin: 5px 10px;
    }
    .el-form {
      padding-right: 15px;
      .el-form-item--large {
        margin-bottom: 10px;
      }
      .el-button {
        padding: 5px 2px !important;
      }
      :deep(.el-input__inner) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    // 弹框
    .el-dialog {
      font-weight: 700;
      max-height: 1000px;
      padding: 10px;
    }
    // 最右侧质控项目设定表格
    .tableBox {
      height: calc(100% - 40px);
    }
    .chart {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
